<script setup>
import {Fullscreen, LineLayer, MapTheme, Marker, PointLayer, Popup, Scene, Zoom} from '@antv/l7';
import {GaodeMap} from '@antv/l7-maps';
import AMapLoader from "@amap/amap-jsapi-loader";
import useOrderStore from "@/store/modules/OrderStore.js";
import {getDistrictCenterCoordinate} from "@/utils/MapUtils.js";
import {onMounted, ref} from 'vue'
import {useRoute} from 'vue-router'

const route = useRoute()

const order = ref({})
onMounted(async () => {
  const orderStore = useOrderStore()
  const allOrder = orderStore.all
  const orderId = Number.parseInt(route.query.orderId)
  for (let o of allOrder) {
    if (o.id === orderId) {
      order.value = o
      break
    }
  }
  const from = await getDistrictCenterCoordinate(order.value.delivery.split('/')[2])
  const to = await getDistrictCenterCoordinate(order.value.county)
  const sceneLineData = [{
    from_lon: from[0],
    from_lat: from[1],
    to_lon: to[0],
    to_lat: to[1],
  }]
  // 设置安全密钥
  window._AMapSecurityConfig = {
    securityJsCode: '85fc0623719ef09cab617d04bcfe4842',
  }
  const AMap = await AMapLoader.load({
    "key": "ec2af04e12fdd316ea6aab110438c23f",
    "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    "plugins": ["AMap.DistrictSearch"],
  });
  const map = new AMap.Map('map', {
    viewMode: '2D',
    resizeEnable: true, // 是否监控地图容器尺寸变化
    zoom: 3.5, // 初始化地图层级
    center: from, // 初始化地图中心点
  });
  const scene = new Scene({
    id: 'map',
    map: new GaodeMap({
      mapInstance: map
    })
  });
  scene.on('loaded', () => {
    const fullscreen = new Fullscreen();
    scene.addControl(fullscreen);
    const zoom = new Zoom();
    scene.addControl(zoom);
    const mapTheme = new MapTheme();
    scene.addControl(mapTheme);
    const layer = new LineLayer({})
        .source(sceneLineData, {
          parser: {
            type: 'json',
            x: 'from_lon',
            y: 'from_lat',
            x1: 'to_lon',
            y1: 'to_lat'
          }
        })
        .size(3)
        .shape('arc3d')
        .color('#FF7C6A')
        .animate({
          interval: 1,
          trailLength: 1,
          duration: 1
        })
        .style({
          segmentNumber: 15,
          opacity: 0.8
        });
    scene.addLayer(layer);
  });
  const pointLayer = new PointLayer({})
      .source(sceneLineData, {
        parser: {
          type: 'json',
          x: 'from_lon',
          y: 'from_lat'
        }
      })
      .shape('circle')
      .active(true)
      .animate(true)
      .size(50)
      .color('#f00')
      .style({
        offsets: [0, 0]
      });
  scene.addLayer(pointLayer);
  const pointLayer2 = new PointLayer({})
      .source(sceneLineData, {
        parser: {
          type: 'json',
          x: 'to_lon',
          y: 'to_lat'
        }
      })
      .shape('circle')
      .active(true)
      .animate(true)
      .size(40)
      .color('#ffa842')
      .style({
        offsets: [0, 0]
      });
  scene.addLayer(pointLayer2);
  const marker = new Marker().setLnglat({lng: from[0], lat: from[1]});
  scene.addMarker(marker);
  let popup = new Popup({});
  scene.addPopup(popup);
  marker.on('click', (e) => {
    const {lng, lat} = e.lngLat
    popup.setOptions({
      title: '发货地',
      html: `${order.value.delivery}`,
      lngLat: {
        lng,
        lat,
      },
    });
  });
  const marker2 = new Marker().setLnglat({lng: to[0], lat: to[1]});
  scene.addMarker(marker2);
  marker2.on('click', (e) => {
    const {lng, lat} = e.lngLat
    popup.setOptions({
      title: '收货地',
      html: `${order.value.province + '/' + order.value.city + '/' + order.value.county}`,
      lngLat: {
        lng,
        lat,
      },
    });
  });
})
</script>

<template>
  <div class="order-map">
    <div id="map" style="width: 100%; height: 300px"></div>
  </div>
</template>

<style scoped lang="scss">

</style>